<template>
	<div>
	<nav class="navigation">
		<div class="nav_container">
			<div class="nav_logo">
				<a href="#">
					<img src="../assets/images/head.jpg" alt="LOGO" style="width: 48px; vertical-align: middle;">
					<span>轻风筝个人小站</span>
				</a>
			</div>
			<ul class="nav_menu">
				<li><router-link to="/">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Home"></use>
					</svg>
					<span>首页</span>
				</router-link></li>
				<li><router-link to="/article">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Document"></use>
					</svg>
					<span>文章</span>
					<img class="more" src="../assets/images/more.png" style="vertical-align: middle; height: 1rem;">
					<div class="dropdown_content">
						<ul>
							<li><a href="">标签</a></li>
							<li><a href="">分类</a></li>
							<li><a href="">归档</a></li>
						</ul>
					</div>
				</router-link></li>
				<li><router-link to="/category">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Flag"></use>
					</svg>
					<span>分类</span>
					<img class="more" src="../assets/images/more.png" style="vertical-align: middle; height: 1rem;">
					<div class="dropdown_content">
						<ul>
							<li><a href="">安全</a></li>
							<li><a href="">前端</a></li>
							<li><a href="">后端</a></li>
							<li><a href="">Python</a></li>
							<li><a href="">C/C++</a></li>
						</ul>
					</div>
				</router-link></li>
				<li><router-link to="/bonus">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Gift"></use>
					</svg>
					<span>彩蛋</span>
					<img class="more" src="../assets/images/more.png" style="vertical-align: middle; height: 1rem;">
					<div class="dropdown_content">
						<ul>
							<li><a href="">Windows</a></li>
							<li><a href="">Mac</a></li>
						</ul>
					</div>
				</router-link></li>
				<li><router-link to="/links">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Links"></use>
					</svg>
					<span>友链</span>
				</router-link></li>
				<li><router-link to="/about">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Information"></use>
					</svg>
					<span>关于</span>
				</router-link></li>
			</ul>
			<a class="show_nav" href="javascript:void(0);" style="float: right;margin: 0 18px;font-size: xx-large;" v-on:click="show_mobile_nav">≡</a>
			<div class="mobile_nav">
				<a href="javascript:void(0);" style="display: block;font-size: xx-large;" v-on:click="hidden_mobile_nav">≡</a>
				<div>
					轻风筝个人小站
				</div>
				<ul>
					<li><router-link to="/">首页</router-link></li>
					<li><a href="javascript:void(0);" v-on:click="toggle">文章▼</a>
						<ul class="show_toggle">
							<li><router-link to="/article">归档</router-link></li>
							<li><router-link to="/">标签</router-link></li>
						</ul>
					</li>
					<li><a href="javascript:void(0);" v-on:click="toggle">分类▼</a>
						<ul class="show_toggle">
							<li><router-link to="/category">安全</router-link></li>
							<li><router-link to="/">前端</router-link></li>
							<li><router-link to="/">后端</router-link></li>
							<li><router-link to="/">Python</router-link></li>
							<li><router-link to="/">C/C++</router-link></li>
						</ul>
					</li>
					<li><a href="javascript:void(0);" v-on:click="toggle">彩蛋▼</a>
						<ul class="show_toggle">
							<li><router-link to="/bonus">Windows</router-link></li>
							<li><router-link to="/">Linux</router-link></li>
							<li><router-link to="/">Mac</router-link></li>
						</ul>
					</li>
					<li><router-link to="/links">友链</router-link></li>
					<li><router-link to="/about">关于</router-link></li>
				</ul>
			</div>
		</div>
	</nav>
	</div>
</template>

<script>
require("../assets/iconfont.js")
export default {
	name: 'Navigation',
	methods: {
		show_mobile_nav: function() {
			document.querySelector('.mobile_nav').style.transform="translateX(0%)"
		},
		hidden_mobile_nav: function() {
			document.querySelector('.mobile_nav').style.transform="translateX(105%)"
		},
		toggle: function(event) {
			if(event.srcElement.nextElementSibling.style.display=="block")
				event.srcElement.nextElementSibling.style.display="none"
			else
				event.srcElement.nextElementSibling.style.display="block"
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
		}
	.navigation {
		position: fixed;
		top: 0px;
		height: 64px;
		width: 100%;
		line-height: 64px;
		background-image: linear-gradient(to right,rgba(255,255,255,0),	rgba(255,192,203,0.5));
		/* 圆边 */
		border-radius: 0px 0px 10px 10px;
		/* 阴影 */
		/* box-shadow: h-shadow v-shadow blur spread color inset */
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
		/* 背景高斯模糊 */
		backdrop-filter: blur(10px);
		z-index:9999;
	}
	.nav_container {
		position: relative;
		margin: 0 auto;
		width: 80%;
		height: 100%;
	}
	.mobile_nav {
		transform: translateX(120%);
		position: fixed;
		padding: 0 15px;
		right: 0;
		top: 0;
		width: 180px;
		height: calc(100% + 800px);
		background-color: darkcyan;
	}
	.mobile_nav a,.mobile_nav div {
		color: lightcyan;
	}
	.mobile_nav ul li {
		display: block;
	}
	.show_nav,.show_toggle {
		display: none;
	}
	.show_toggle a {
		color: brown;
	}
	.nav_logo {
		position: absolute;
		/* 希望所有内容在一行靠左显示 */
		display: inline-block;
		left: 0px;
		height: 100%;
	}
	.nav_logo a {
		display: inline-block;
		color: white;
		padding: 0 15px;
		/* background-color: grey; */
		text-decoration: none;
	}
	.nav_menu {
		position: absolute;
		right: 0px;
		height: 100%;
	}
	.nav_menu>li {
		display: inline-block;
	}
	.nav_menu>li a {
		padding: 0 15px;
		color: white;
		display: inline-block;
		/* background-color: grey; */
		text-decoration: none;
	}
	/* more图标动画 */
	li img,.mobile_nav{
		transition: all 0.2s;
	}
	li:hover img {
		transform: rotateZ(180deg);
	}
	/* 下拉菜单 */
	.dropdown_content {
		position: absolute;
		display: none;
		margin-left: -10%;
		min-width: 30%;
		padding: 12px 16px;
		text-align: center;
		background-image: linear-gradient(to right,rgba(255,255,255,0.5),	rgba(255,192,203,0.5));	
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		border-radius: 10px;
	}
	.dropdown_content>ul>li {
		list-style:none;
		font-size: 1rem;
		line-height: 1.5rem;
		text-decoration: none;
	}
	.dropdown_content>ul>li:hover {
		background-color: rgba(0,0,0,0.1);
		border-radius: 5px;
	}
	li:hover .dropdown_content {
		display: block;
	}
	@media screen and (max-width:900px) {
		.nav_container {
			width: 100%;
		}
	}
	@media screen and (max-width:700px) {
		.nav_logo span {
			display: none;
		}
		.nav_menu {
			display: none;
		}
		.show_nav {
			display: block;
		}
	}
</style>
